<template>
  <f7-page>
    <qm-currentcy-navbar title="课程列表"></qm-currentcy-navbar>
    <qm-classified-retrieval :options="typeOpt"></qm-classified-retrieval>
    <f7-block class="course-list">
      <template v-for="(item, index) in courseList">
        <qm-course-card :key="index" v-bind="item"></qm-course-card>
      </template>
    </f7-block>
    <qm-fixed-nail top="80%" left="80%"></qm-fixed-nail>
  </f7-page>
</template>

<script>
const defaultSrc = require("/static/img/list/pic_touxiang.png");
export default {
  name: "course-list",
  data() {
    return {
      activeCourse: 0,
      courseList: [
        {
          flagText: "教案",
          flagBgColor: "#527BEE",
          title: "上课用材",
          src: defaultSrc,
          uploader: "系统管理员",
          uploadTime: "2022-3-8"
        },
        {
          flagText: "作业",
          flagBgColor: "#23BCCA",
          title: "上课用材",
          src: defaultSrc,
          uploader: "系统管理员",
          uploadTime: "2022-3-8"
        },
        {
          flagText: "教案",
          flagBgColor: "#527BEE",
          title: "上课用材",
          src: defaultSrc,
          uploader: "系统管理员",
          uploadTime: "2022-3-8"
        },
        {
          flagText: "作业",
          flagBgColor: "#23BCCA",
          title: "上课用材",
          src: defaultSrc,
          uploader: "系统管理员",
          uploadTime: "2022-3-8"
        }
      ],
      typeOpt: [
        { text: "全部", value: 0 },
        { text: "全部", value: 1 },
        { text: "全部", value: 2 }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.course-list {
  // position: static;
  margin: 0;
  padding: calc(30px * var(--ratio));
  background-color: #F7F9FC;
}
::v-deep .page-content {
  padding-top: calc(88px * var(--ratio));
  min-height: 100vh;
  background-color: #F7F9FC;
}
</style>